<!DOCTYPE html>
<!-- saved from url=(0105)file:///F:/else/%E4%B8%80%E4%B8%AADIV%E5%85%83%E7%B4%A0%E5%AE%9E%E7%8E%B0%E7%9A%84%E5%8A%A8%E7%94%BB.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <!--<base href="http://www.webhek.com/misc-res/css-loaders/">-->
    <!--<base href=".">--><base href=".">
    
    <title>你能相信吗？这些都是由一个DIV元素实现的动画，纯CSS3技术</title>
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="CSS3给Web程序员提供了无限发挥的创造空间，以前只有视频、Flash、JavaScript才能实现的动画效果，如今只需要纯CSS+HTML就能做到。你能相信吗？这里呈现的所有动画，都是由一个DIV元素实现，纯CSS3技术。">
    <meta property="og:title" content="你能相信吗？这些都是由一个DIV元素实现的动画，纯CSS3技术">
    <meta property="og:type" content="website">
    <meta property="og:description" content="CSS3给Web程序员提供了无限发挥的创造空间，以前只有视频、Flash、JavaScript才能实现的动画效果，如今只需要纯CSS+HTML就能做到。你能相信吗？这里呈现的所有动画，都是由一个DIV元素实现，纯CSS3技术。">
    <meta property="og:image" content="http://www.webhek.com/misc/css-loaders/css-loaders-screenshot.jpg">
    <meta property="og:url" content="http://www.webhek.com/misc/css-loaders/">
    <link rel="stylesheet" href="./index_files/main.css">
    <link rel="stylesheet" href="./index_files/load1.css">
    <link rel="stylesheet" href="./index_files/load2.css">
    <link rel="stylesheet" href="./index_files/load3.css">
    <link rel="stylesheet" href="./index_files/load4.css">
    <link rel="stylesheet" href="./index_files/load5.css">
    <link rel="stylesheet" href="./index_files/load6.css">
    <link rel="stylesheet" href="./index_files/load7.css">
    <link rel="stylesheet" href="./index_files/load8.css">
    <script async="" src="file://www.google-analytics.com/analytics.js"></script><script charset="utf-8" src="./index_files/shorten.json"></script>
    <script charset="utf-8" src="./index_files/counts.json"></script>
<script charset="utf-8" src="./index_files/shorten(1).json"></script></head>
<body>
<header>
    <div class="inner">
        <h1>你能相信吗？这些都是由一个DIV元素实现的动画，纯CSS3技术</h1>
    </div>
</header>
<main>
<div class="inner">
    <div class="load-container load1">
        <div class="loader">加载中...</div>
        <a href="http://www.webhek.com/misc-res/css-loaders/#load1">&lt; 源代码 &gt;</a></div>
    <div class="load-container load2">
        <div class="loader">加载中...</div>
        <a href="http://www.webhek.com/misc-res/css-loaders/#load2">&lt; 源代码 &gt;</a></div>
    <div class="load-container load3">
        <div class="loader">加载中...</div>
        <a href="http://www.webhek.com/misc-res/css-loaders/#load3">&lt; 源代码 &gt;</a></div>
    <div class="load-container load4">
        <div class="loader">加载中...</div>
        <a href="http://www.webhek.com/misc-res/css-loaders/#load4">&lt; 源代码 &gt;</a></div>
    <div class="load-container load5">
        <div class="loader">加载中...</div>
        <a href="http://www.webhek.com/misc-res/css-loaders/#load5">&lt; 源代码 &gt;</a></div>
    <div class="load-container load6">
        <div class="loader">加载中...</div>
        <a href="http://www.webhek.com/misc-res/css-loaders/#load6">&lt; 源代码 &gt;</a></div>
    <div class="load-container load7">
        <div class="loader">加载中...</div>
        <a href="http://www.webhek.com/misc-res/css-loaders/#load7">&lt; 源代码 &gt;</a></div>
    <div class="load-container load8">
        <div class="loader">加载中...</div>
        <a href="http://www.webhek.com/misc-res/css-loaders/#load8">&lt; 源代码 &gt;</a></div>
</div>
<div class="overlay hidden"></div>
<!--really pissed off Jade can handle vars in includes - should be able to just loop this:-->
<div id="load1" class="source hidden">
    <textarea readonly="" class="markup">&lt;div class="loader"&gt;加载中...&lt;/div&gt;</textarea>
    <textarea readonly="" class="css">.loader,
        .loader:before,
        .loader:after {
        background: #FFF;
        -webkit-animation: load1 1s infinite ease-in-out;
        animation: load1 1s infinite ease-in-out;
        width: 1em;
        height: 4em;
        }
        .loader:before,
        .loader:after {
        position: absolute;
        top: 0;
        content: '';
        }
        .loader:before {
        left: -1.5em;
        }
        .loader {
        text-indent: -9999em;
        margin: 40% auto;
        position: relative;
        font-size: 11px;
        -webkit-animation-delay: 0.16s;
        animation-delay: 0.16s;
        }
        .loader:after {
        left: 1.5em;
        -webkit-animation-delay: 0.32s;
        animation-delay: 0.32s;
        }
        @-webkit-keyframes load1 {
        0%,
        80%,
        100% {
        box-shadow: 0 0 #FFF;
        height: 4em;
        }
        40% {
        box-shadow: 0 -2em #ffffff;
        height: 5em;
        }
        }
        @keyframes load1 {
        0%,
        80%,
        100% {
        box-shadow: 0 0 #FFF;
        height: 4em;
        }
        40% {
        box-shadow: 0 -2em #ffffff;
        height: 5em;
        }
        }
    </textarea>
</div>
<div id="load2" class="source hidden">
    <textarea readonly="" class="markup">&lt;div class="loader"&gt;加载中...&lt;/div&gt;</textarea>
    <textarea readonly="" class="css">.load2 .loader,
        .load2 .loader:before,
        .load2 .loader:after {
        border-radius: 50%;
        }
        .load2 .loader:before,
        .load2 .loader:after {
        position: absolute;
        content: '';
        }
        .load2 .loader:before {
        width: 5.2em;
        height: 10.2em;
        background: #0dcecb;
        border-radius: 10.2em 0 0 10.2em;
        top: -0.1em;
        left: -0.1em;
        -webkit-transform-origin: 5.2em 5.1em;
        transform-origin: 5.2em 5.1em;
        -webkit-animation: load2 2s infinite ease 1.5s;
        animation: load2 2s infinite ease 1.5s;
        }
        .load2 .loader {
        font-size: 11px;
        text-indent: -99999em;
        margin: 30% auto;
        position: relative;
        width: 10em;
        height: 10em;
        box-shadow: inset 0 0 0 1em #FFF;
        }
        .load2 .loader:after {
        width: 5.2em;
        height: 10.2em;
        background: #0dcecb;
        border-radius: 0 10.2em 10.2em 0;
        top: -0.1em;
        left: 5.1em;
        -webkit-transform-origin: 0px 5.1em;
        transform-origin: 0px 5.1em;
        -webkit-animation: load2 2s infinite ease;
        animation: load2 2s infinite ease;
        }
        @-webkit-keyframes load2 {
        0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        }
        100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        }
        }
        @keyframes load2 {
        0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        }
        100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        }
        }
    </textarea>
</div>
<div id="load3" class="source hidden">
    <textarea readonly="" class="markup">&lt;div class="loader"&gt;加载中...&lt;/div&gt;</textarea>
    <textarea readonly="" class="css">.load3 .loader {
        font-size: 10px;
        margin: 30% auto;
        text-indent: -9999em;
        width: 11em;
        height: 11em;
        border-radius: 50%;
        background: #ffffff;
        background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
        background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
        background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
        background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
        background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
        position: relative;
        -webkit-animation: load3 1.4s infinite linear;
        animation: load3 1.4s infinite linear;
        }
        .load3 .loader:before {
        width: 50%;
        height: 50%;
        background: #FFF;
        border-radius: 100% 0 0 0;
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        }
        .load3 .loader:after {
        background: #0dcecb;
        width: 75%;
        height: 75%;
        border-radius: 50%;
        content: '';
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        }
        @-webkit-keyframes load3 {
        0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        }
        100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        }
        }
        @keyframes load3 {
        0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        }
        100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        }
        }
    </textarea>
</div>
<div id="load4" class="source hidden">
    <textarea readonly="" class="markup">&lt;div class="loader"&gt;加载中...&lt;/div&gt;</textarea>
    <textarea readonly="" class="css">.load4
        .loader {
        font-size: 20px;
        margin: 45% auto;
        width: 1em;
        height: 1em;
        border-radius: 50%;
        position: relative;
        text-indent: -9999em;
        -webkit-animation: load4 1.3s infinite linear;
        animation: load4 1.3s infinite linear;
        }
        @-webkit-keyframes load4 {
        0%,
        100% {
        box-shadow: 0em -3em 0em 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em
        0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em
        #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em
        0 0em #ffffff;
        }
        12.5% {
        box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 0.2em #ffffff, 3em
        0em 0 0em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff,
        -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em
        #ffffff;
        }
        25% {
        box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 0em #ffffff, 3em
        0em 0 0.2em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 -0.5em #ffffff,
        -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em
        #ffffff;
        }
        37.5% {
        box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
        3em 0em 0 0em #ffffff, 2em 2em 0 0.2em #ffffff, 0em 3em 0 0em #ffffff,
        -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em
        #ffffff;
        }
        50% {
        box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
        3em 0em 0 -0.5em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 0.2em
        #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0
        -0.5em #ffffff;
        }
        62.5% {
        box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
        3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 0em
        #ffffff, -2em 2em 0 0.2em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0
        -0.5em #ffffff;
        }
        75% {
        box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
        3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em
        #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0
        0em #ffffff;
        }
        87.5% {
        box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em
        0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em
        #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0
        0.2em #ffffff;
        }
        }
        @keyframes load4 {
        0%,
        100% {
        box-shadow: 0em -3em 0em 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em
        0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em
        #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em
        0 0em #ffffff;
        }
        12.5% {
        box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 0.2em #ffffff, 3em
        0em 0 0em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff,
        -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em
        #ffffff;
        }
        25% {
        box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 0em #ffffff, 3em
        0em 0 0.2em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 -0.5em #ffffff,
        -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em
        #ffffff;
        }
        37.5% {
        box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
        3em 0em 0 0em #ffffff, 2em 2em 0 0.2em #ffffff, 0em 3em 0 0em #ffffff,
        -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em
        #ffffff;
        }
        50% {
        box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
        3em 0em 0 -0.5em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 0.2em
        #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0
        -0.5em #ffffff;
        }
        62.5% {
        box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
        3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 0em
        #ffffff, -2em 2em 0 0.2em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0
        -0.5em #ffffff;
        }
        75% {
        box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
        3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em
        #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0
        0em #ffffff;
        }
        87.5% {
        box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em
        0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em
        #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0
        0.2em #ffffff;
        }
        }
    </textarea>
</div>
<div id="load5" class="source hidden">
    <textarea readonly="" class="markup">&lt;div class="loader"&gt;加载中...&lt;/div&gt;</textarea>
    <textarea readonly="" class="css">.load5
        .loader {
        margin: 46% auto;
        font-size: 25px;
        width: 1em;
        height: 1em;
        border-radius: 50%;
        position: relative;
        text-indent: -9999em;
        -webkit-animation: load5 1.1s infinite ease;
        animation: load5 1.1s infinite ease;
        }
        @-webkit-keyframes load5 {
        0%,
        100% {
        box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255,
        255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em
        0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255,
        0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em
        rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
        }
        12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em
        -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em
        1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255,
        255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em
        rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
        }
        25% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em
        -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em
        1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255,
        255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em
        rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
        }
        37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em
        -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255,
        255, 0.7), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em
        rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255,
        255, 255, 0.2);
        }
        50% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em
        -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255,
        255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em
        #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em
        rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
        }
        62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em
        -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255,
        255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em
        rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em
        rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
        }
        75% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em
        -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255,
        255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em
        rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7),
        -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
        }
        87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em
        -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255,
        255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em
        rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
        }
        }
        @keyframes load5 {
        0%,
        100% {
        box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255,
        255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em
        0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255,
        0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em
        rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
        }
        12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em
        -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em
        1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255,
        255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em
        rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
        }
        25% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em
        -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em
        1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255,
        255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em
        rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
        }
        37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em
        -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255,
        255, 0.7), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em
        rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255,
        255, 255, 0.2);
        }
        50% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em
        -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255,
        255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em
        #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em
        rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
        }
        62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em
        -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255,
        255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em
        rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em
        rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
        }
        75% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em
        -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255,
        255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em
        rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7),
        -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
        }
        87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em
        -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255,
        255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em
        rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
        }
        }
    </textarea>
</div>
<div id="load6" class="source hidden">
    <textarea readonly="" class="markup">&lt;div class="loader"&gt;加载中...&lt;/div&gt;</textarea>
    <textarea readonly="" class="css">.loader
        {
        font-size: 90px;
        text-indent: -9999em;
        overflow: hidden;
        width: 1em;
        height: 1em;
        border-radius: 50%;
        margin: 33% auto;
        position: relative;
        -webkit-animation: load6 1.7s infinite ease;
        animation: load6 1.7s infinite ease;
        }
        @-webkit-keyframes load6 {
        0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0
        -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0
        -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;
        }
        5%,
        95% {
        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0
        -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0
        -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;
        }
        30% {
        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.51em -0.66em 0
        -0.42em #ffffff, -0.75em -0.36em 0 -0.44em #ffffff, -0.83em -0.03em 0
        -0.46em #ffffff, -0.81em 0.21em 0 -0.477em #ffffff;
        }
        55% {
        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.29em -0.78em 0
        -0.42em #ffffff, -0.43em -0.72em 0 -0.44em #ffffff, -0.52em -0.65em 0
        -0.46em #ffffff, -0.57em -0.61em 0 -0.477em #ffffff;
        }
        100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0
        -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0
        -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;
        }
        }
        @keyframes load6 {
        0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0
        -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0
        -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;
        }
        5%,
        95% {
        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0
        -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0
        -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;
        }
        30% {
        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.51em -0.66em 0
        -0.42em #ffffff, -0.75em -0.36em 0 -0.44em #ffffff, -0.83em -0.03em 0
        -0.46em #ffffff, -0.81em 0.21em 0 -0.477em #ffffff;
        }
        55% {
        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.29em -0.78em 0
        -0.42em #ffffff, -0.43em -0.72em 0 -0.44em #ffffff, -0.52em -0.65em 0
        -0.46em #ffffff, -0.57em -0.61em 0 -0.477em #ffffff;
        }
        100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0
        -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0
        -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;
        }
        }
    </textarea>
</div>
<div id="load7" class="source hidden">
    <textarea readonly="" class="markup">&lt;div class="loader"&gt;加载中...&lt;/div&gt;</textarea>
    <textarea readonly="" class="css">.load7 .loader:before,
        .load7 .loader:after,
        .load7 .loader {
        border-radius: 50%;
        width: 2.5em;
        height: 2.5em;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation: load7 1.8s infinite ease-in-out;
        animation: load7 1.8s infinite ease-in-out;
        }
        .load7 .loader {
        margin: 8em auto;
        font-size: 10px;
        position: relative;
        text-indent: -9999em;
        -webkit-animation-delay: 0.16s;
        animation-delay: 0.16s;
        }
        .load7 .loader:before {
        left: -3.5em;
        }
        .load7 .loader:after {
        left: 3.5em;
        -webkit-animation-delay: 0.32s;
        animation-delay: 0.32s;
        }
        .load7 .loader:before,
        .loader:after {
        content: '';
        position: absolute;
        top: 0;
        }
        @-webkit-keyframes load7 {
        0%,
        80%,
        100% {
        box-shadow: 0 2.5em 0 -1.3em #ffffff;
        }
        40% {
        box-shadow: 0 2.5em 0 0 #FFF;
        }
        }
        @keyframes load7 {
        0%,
        80%,
        100% {
        box-shadow: 0 2.5em 0 -1.3em #ffffff;
        }
        40% {
        box-shadow: 0 2.5em 0 0 #FFF;
        }
        }
    </textarea>
</div>
<div id="load8" class="source hidden">
    <textarea readonly="" class="markup">&lt;div class="loader"&gt;加载中...&lt;/div&gt;</textarea>
    <textarea readonly="" class="css">        .load8 .loader {
        margin: 6em auto;
        font-size: 10px;
        position: relative;
        text-indent: -9999em;
        border-top: 1.1em solid rgba(255, 255, 255, 0.2);
        border-right: 1.1em solid rgba(255, 255, 255, 0.2);
        border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
        border-left: 1.1em solid #ffffff;
        -webkit-animation: load8 1.1s infinite linear;
        animation: load8 1.1s infinite linear;
        }
        .load8 .loader,
        .load8 .loader:after {
        border-radius: 50%;
        width: 10em;
        height: 10em;
        }
        @-webkit-keyframes load8 {
        0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        }
        100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        }
        }
        @keyframes load8 {
        0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        }
        100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        }
        }
    </textarea>
</div>
</main>
<footer>
    <div class="inner"><a href="http://twitter.com/lukehaas" target="_blank" class="twitter"><img src="./index_files/me.jpg" alt="Twitter pic" height="45" width="45"><span>Created by @lukehaas</span></a>
    </div>
</footer>
<script async="" src="./index_files/analytics.js.下载"></script>
<script src="./index_files/jquery.js.下载"></script>
<script src="./index_files/main.js.下载"></script>
<div>
    <style>
        #share_bar { background: none repeat scroll 0 0 #FFFFFF; /*#F5F8FD*/ border: 1px solid #CBD5ED; border-radius: 5px; color: #000000; font-size: 13px; text-align: center; z-index: 999; position: fixed;
            right: 0px;
            top: 50%;
            margin-top: -140px;
        }
        #share_bar ul li { list-style: none; display: block; }
        #share_bar ul, #share_bar ul li { margin: 0; padding: 0 }
        #share_bar > ul > li > a { width: 45px; height: 35px; display: inline-block; text-align: center; position: relative; }
        #s_t, #s_c { line-height: 25px; vertical-align: middle; text-align: center; }
        #share_bar > ul > li > a > span { height: 28px; width: 28px; display: inline-block; position: absolute; top: 50%; left: 50%; margin-left: -14px; margin-top: -14px; background-repeat: no-repeat; background-image: url(/misc-res/images/share-icon.png); }
        #tsina > span { background-position: 0 -91px; }
        #qzone > span { background-position: 0 -61px; }
        #tqq > span { background-position: 0 -121px; }
        #renren > span { background-position: 0 -151px; }
        #twitter > span { background-position: 0 -31px; }
        #tsina:hover { background-color: #e6162c; }
        #qzone:hover { background-color: #2980d7; }
        #tqq:hover { background-color: #4388c6; }
        #renren:hover { background-color: #f8f8f8; }
        #twitter:hover { background-color: #00aced; }
        .heng_share #share_bar { position: relative; margin-top: 0; right: 0; top: 0; display: inline-block; }
        .heng_share #share_bar ul li { float: left; width: 35px; }
        .left_share #share_bar { right: inherit; left: 0 }
    </style>
    <div id="share_bar">
        <ul>
            <li id="s_t">分享</li>
            <li><a id="tsina" href="javascript:;" onclick="w(&#39;tsina&#39;)"><span></span></a></li>
            <li><a id="qzone" href="javascript:;" onclick="w(&#39;qzone&#39;)"><span></span></a></li>
            <li><a id="tqq" href="javascript:;" onclick="w(&#39;tqq&#39;)"><span></span></a></li>
            <li><a id="renren" href="javascript:;" onclick="w(&#39;renren&#39;)"><span></span></a></li>
            <li><a id="twitter" href="javascript:;" onclick="w(&#39;twitter&#39;)"><span></span></a></li>
            <li id="s_c">82</li>
        </ul>
    </div>
</div>
<script src="./index_files/util.js.下载"></script>
<a style="display:none" href="http://www.webhek.com/">webhek</a>
<script src="./index_files/ga.js.下载"></script>
<script>var shares_wb = 42;</script>
<script src="./index_files/wb.js.下载"></script>
<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/
Page Caching using disk
 Served from: www.webhek.com @ 2015-03-06 15:35:36 by W3 Total Cache -->
</body></html>